@import 'var';

.chat-wrap {
  width: 600px;
  height: 400px;
  margin: 50px auto 0;
  box-shadow: 0 0 4px #ccc;

  .chat-list {
    float: left;
    width: 149px;
    height: 400px;
    border-right: 1px solid #666;

    .chat-head {
      height: 50px;
      line-height: 50px;
      background-color: #cdcdcd;
      user-select: none;

      .user-head {
        margin-left: 10px;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        vertical-align: middle;
      }

      .user-name {
        margin-left: 10px;
        font-size: 12px;
      }
    }

    .chat-body {
      height: 300px;
      overflow: auto;

      .user-list-name {
        font-size: 14px;
        cursor: default;
      }
    }

    .chat-foot {
      height: 50px;
      line-height: 50px;
    }
  }

  .chat-room {
    float: left;
    width: 450px;
    height: 400px;

    .chat-msg {
      height: 350px;
      overflow: auto;

      .msg {
        padding: 10px 10px 0;

        img {
          width: 30px;
          height: 30px;
          border-radius: 50%;
          float: left;
        }

        p {
          float: left;
          margin-left: 10px;
        }
      }

      .self {

        img,
        p {
          float: right;
        }

        p {
          margin-left: 0;
          margin-right: 10px;
        }
      }
    }

    .chat-input {
      height: 50px;

      .chat-content {
        width: 380px;
        float: left;
        box-sizing: border-box;
        height: 50px;
        padding: 10px 5px;
        outline: none;
        border: 1px solid #666;
      }

      .chat-send {
        width: 70px;
        height: 50px;
        background-color: $theme-color;
        color: #fff;
        border: none;
      }
    }
  }
}